<script setup lang="js">
import {ref, onMounted, watch} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {Tickets} from "@element-plus/icons-vue";
import {fetchMenuList,deleteMenu,updateHidden} from "@/api/menu.js";
import {ElMessage, ElMessageBox} from "element-plus";

const route = useRoute();
const router = useRouter();
const menuTable = ref('');
const menuList = ref([]);
const total = ref(0);
const listQuery = ref({
  pageNum: 1,
  pageSize: 5,
});
const  parentId = ref(0);

onMounted(() => {
  resetParentId()
})
watch(route.query.id, (val) => {
  if(val!= null) {
    parentId.value = val;
  }
})

const resetParentId = () => {
  if(route.query.parentId !=null) {
    parentId.value = route.query.parentId;
    getMenuList();
    console.log(parentId.value);
  } else {
    parentId.value = 0;
  }
  getMenuList();
}

const getMenuList = () => {
  fetchMenuList(parentId.value, listQuery.value).then(res => {
    menuList.value = res.data.data.list;
    total.value = res.data.data.total;
  })
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该菜单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteMenu(row.id).then(res => {
      ElMessage.warning(res.data.message);
      ElMessage.success('删除成功');
      getMenuList();
    }).catch(() => {
      ElMessage.error('删除失败');
    })
  }).catch(() => {
    ElMessage.info('已取消删除');
  })
}

// TODo: 分页操作功能
const handleSizeChange = (size) => {
  listQuery.pageSize = size;
  getMenuList();
}
const handleCurrentChange = (page) => {
  listQuery.pageNum = page;
  getMenuList();
}

const handleAddMenu = () => {
  router.push({ path: '/permission/menuList/updateMenu' })
}

const handleHiddenChange = (row) => {
  updateHidden(row.id,{hidden:row.hidden}).then(res => {
    ElMessage.warning(res.data.message);
    ElMessage.success('修改成功');
  })
}

const handleShowNextLevel = (row) => {
  router.push({ path: '/permission/menuList', query: {parentId: row.id} });
}

const handleUpdate = (row) => {
  router.push({ path: '/permission/menuList/updateMenu', query: { id: row.id } })
}


</script>

<template>
    <div class="menu-list">
      <!-- 添加按钮-->
      <div class="add-list">
        <div class="add-btn">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>数据列表</span>
        </div>
        <div class="add-btn">
          <el-button type="primary" icon="plus" @click="handleAddMenu()">添加</el-button>
        </div>
      </div>

      <!-- 数据列表 -->
      <div class="data-list">
        <el-table ref="menuTable"
                  style="width: 100%"
                  :data="menuList" border>
          <el-table-column label="编号" width="100" align="center">
            <template #default={row}>{{row.id}}</template>
          </el-table-column>
          <el-table-column label="菜单名称" align="center">
            <template #default={row}>{{row.title}}</template>
          </el-table-column>
          <el-table-column label="菜单级数" align="center">
            <template #default={row}>{{row.level === 0 ? '一级菜单' : '二级菜单'}}</template>
          </el-table-column>
          <el-table-column label="前端名称" align="center">
            <template #default={row}>{{row.name}}</template>
          </el-table-column>
          <el-table-column label="前端图标" align="center">
            <template #default={row}><svg-icon :icon-class="row.icon"></svg-icon></template>
          </el-table-column>
          <el-table-column label="是否显示" align="center">
            <template #default={row}>
              <el-switch
                  @change="handleHiddenChange(row)"
                  :active-value="0"
                  :inactive-value="1"
                  v-model="row.hidden">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center">
            <template #default={row}>{{row.sort }}</template>
          </el-table-column>
          <el-table-column label="设置" align="center">
            <template #default={row}>
              <el-button
                  size="small"
                  type="text"
                  :disabled="row.level === 0 ? false : true"
                  @click="handleShowNextLevel(row)">查看下级
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default={row}>
              <el-button
                  size="small"
                  type="primary"
                  plain
                  icon="edit"
                  @click="handleUpdate(row)">编辑
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  plain
                  icon="delete"
                  @click="handleDelete(row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page-bar">
        <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[5,10,15,20]"
            v-model:page-size="listQuery.pageSize"
            v-model:current-page="listQuery.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </div>
</template>

<style scoped lang="scss">
.menu-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .add-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .page-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

  }
}

</style>